<template>
	<view class="dialog-container" v-if="show">
		<!-- 遮罩层 -->
		<view class="mask" @click="close"></view>

		<!-- 弹窗内容 -->
		<view class="dialog-content">
			<view class="dialog-header">
				<view class="title-box">
					<text class="title">个人临时二维码</text>
				</view>
				<view class="close-btn-box">
					<text class="close-btn" @click="close">×</text>
				</view>
			</view>

			<view class="dialog-body">
				<!-- 司机信息 -->
				<view class="driver-info">
					<text class="info-item">姓名：{{driverInfo.name}}</text>
					<text class="info-item">车牌号：{{driverInfo.carNumber}}</text>
					<text class="info-item">入驻时间：{{driverInfo.settledTime}}</text>
				</view>

				<!-- 二维码区域 -->
				<view class="qrcode-wrapper">
					<image :src="driverInfo.qrcodeUrl" mode="aspectFit" class="qrcode-image" alt="个人临时二维码"></image>
				</view>

				<!-- 有效期提示 -->
				<text class="valid-tip">有效期：永久（重新生成会变化）</text>
			</view>

			<view class="dialog-footer">
				<button class="confirm-btn" @click="close">保存二维码</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			driverInfo: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			close() {
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss">
	.dialog-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
		}
	}


	.dialog-content {
		position: relative;
		width: 80%;
		max-width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);

		.dialog-header {
		  position: relative;
		  padding: 24rpx 32rpx; /* 上下内边距 24rpx，左右 32rpx */
		  border-bottom: 1rpx solid #eee;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		
		  // 标题容器：宽度 = 总宽度 - 左右内边距（32rpx*2）
		  .title-box {
		    position: absolute;
		    width: calc(100% - 32rpx * 2); /* 减去左右内边距总和 */
		    height: calc(100% - 24rpx * 2); /* 减去上下内边距总和 */
		    display: flex;
		    justify-content: center;
		    align-items: center; /* 新增：垂直居中标题 */
		
		    .title {
		      font-size: 36rpx;
		      font-weight: bold;
		      color: #333;
		    }
		  }
		
		  // 关闭按钮容器：同样减去内边距
		  .close-btn-box {
		    position: absolute;
		    width: calc(100% - 32rpx * 2); /* 与标题容器保持一致的宽度 */
		    height: calc(100% - 24rpx * 2); /* 与标题容器保持一致的高度 */
		    display: flex;
		    justify-content: flex-end; /* 靠右显示关闭按钮 */
		    align-items: center; /* 垂直居中按钮 */
		
		    .close-btn {
		      font-size: 40rpx;
		      color: #999;
		      cursor: pointer;
		    }
		  }
		}

		.dialog-body {
			padding: 32rpx;

			.driver-info {
				margin-bottom: 32rpx;

				.info-item {
					display: flex;
					justify-content: center;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 16rpx;
				}
			}

			.qrcode-wrapper {
				text-align: center;
				margin-bottom: 24rpx;

				.qrcode-image {
					width: 400rpx;
					height: 400rpx;
					margin-bottom: 16rpx;
					background-color: #f5f5f5;
					border-radius: 8rpx;
				}
			}

			.valid-tip {
				display: block;
				text-align: center;
				font-size: 24rpx;
				color: #ff5252;
				margin-top: 16rpx;
			}
		}

		.dialog-footer {
			padding: 24rpx 32rpx;
			border-top: 1rpx solid #eee;
			text-align: center;

			.confirm-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #007AFF;
				color: #fff;
				border-radius: 12rpx;
				font-size: 32rpx;
				border: none;
			}
		}
	}
</style>